<template>
	<view class="page">
		<view class="tab-box dis-flex t-c">
			<view v-for="(tab_item,tab_index) in tab" :key="tab_index" class="flex-box t-c f_32 tab dis-flex flex-dir-column flex-y-center flex-x-center"
					@click="tab_switch(tab_index)">
				<view class="">{{tab_item}}</view>
				<view :class="tabIndex==tab_index?'tab_active':'tab_default'"></view>
			</view>
		</view>
		<view class="list-box">
			<!-- '订单结算' -->
			<view v-for="(item,index) in orderList" :key="index" class="item dis-flex" v-if="tabIndex==0">
				<view class="icon">
					<image :src="item.avatar!=''?item.avatar:imgPrefix('/static/image/icon/my_account_detail.png')" mode=""></image>
				</view>
				<view class="right flex-box">
					<view class="dis-flex flex-x-between m-b-12">
						<view class="f_32 navy_blue">{{item.nickname}}-订单结算</view>
						<view class="f_32 violet1">+{{item.money}}</view>
					</view>
					<view class="dis-flex flex-x-between">
						<view class="f_24 gery1">{{item.createtime}}</view>
						<view class="f_24 gery1">订单号：{{item.order_no}}</view>
					</view>
				</view>
			</view>
			<!-- '提现记录' -->
			<view v-for="(item,index) in withdrawList" :key="index" class="item dis-flex" v-if="tabIndex==1">
				<view class="icon">
					<image :src="imgPrefix('/static/image/icon/my_account_detail.png')" mode=""></image>
				</view>
				<view class="right flex-box">
					<view class="dis-flex flex-x-between m-b-12">
						<!-- 	状态:1=申请中,2=已拒绝,3=已打款 -->
						<view class="f_32 navy_blue">提现({{item.status==1?'申请中':item.status==2?'已拒绝':item.status==3?'已打款':''}})</view>
						<view class="f_32 violet1">-{{item.money}}</view>
					</view>
					<view class="dis-flex flex-x-between">
						<view class="f_24 gery1">{{item.createtime}}</view>
						<view class="f_24 navy_blue">余额：{{item.after_money}}</view>
					</view>
				</view>
			</view>
			<load-more :status="loadingStatus"></load-more>
		</view>
	</view>
</template>

<script>
const app = getApp();
import API from '@/static/api/index.js';
import loadMore from '@/components/loadmore/index.vue';
	export default{
		name:'index',
		components: {
			loadMore
		},
		data(){
			return{
				tabIndex:0,//tab下标
				loadingStatus:'loading',
				page:1,
				size:10,
				total:0,
				isRequest:false,
				List:[],
				tab:['订单结算','提现记录'],
				//订单结算
				orderList:[],
				//提现记录
				withdrawList:[]
			}
		},
		onShow(){
		},
		onLoad() {
			this._getList()
		},
		methods:{
			_getList(){
				
				let {isRequest,page,size,tabIndex}=this;
				if(!isRequest){
					isRequest=true
					this.loadingStatus='loading'
					let send = tabIndex==0?API.getTeacherMoneyList({page:page,size:size}):API.getTeacherWithdrawList({page:page,size:size})
					send.then(res=>{
						app._log(res)
						let {code,data}=res
						if(code==1){
							if(this.tabIndex==0){
								let list = page==1?data.logs:this.orderList.concat(data.logs)
								this.orderList = list;
								this.total = data.total;
								this.loadingStatus=this.orderList.length>=data.total?'nomore':'getmore'
							}else{
								let list = page==1?data.logs:this.withdrawList.concat(data.logs)
								this.withdrawList = list;
								this.total = data.total;
								this.loadingStatus=this.withdrawList.length>=data.total?'nomore':'getmore'
							}
						}else{
							this.loadingStatus=code==405?(page==1?'empty':'nomore'):'error'
							if(page==1){
								if(this.tabIndex==0){
									this.orderList = [];
								}else{
									this.withdrawList = [];
								}
								this.total = 0
							}
						}
						isRequest=false
					})
				}
			},
			tab_switch(index){
				this.tabIndex=index
				this.page=1
				this.size=10
			}
		},
		watch:{
			page(val,oldVal){
				this._getList()
			},
			tabIndex(val,oldVal){
				this._getList()
			}
		},
		onReachBottom() {
			let {isRequest,page,total,orderList,withdrawList,tabIndex}=this
			if(!isRequest&&(page==1||(tabIndex==0?orderList.length:withdrawList.length)<total)){
				this.page+=1
			}
		}
	}
</script>

<style scoped lang="scss">
	.page{
		background-color: white;
	}
	.list-box{
		.item{
			padding:0 48rpx;
			.icon{
				padding: 42rpx 0;
				font-size: 0;
				image{
					width: 88rpx;
					height: 88rpx;
					margin-right: 24rpx;
				}
			}
			.right{
				padding: 40rpx 0;
				border-bottom:1px solid #f2f2f2;
			}
			.m-b-12{
				margin-bottom: 12rpx;
			}
		}
	}
	.tab-box{
		background-color: #f8f8f8;
		height: 108rpx;
		.tab{
			
		}
		.tab_active{
			width: 14px;
			height: 2px;
			background-image: linear-gradient(180deg, 
				#7f4aff 0%, 
				#a977ff 100%);
			border-radius: 2px;
			margin-top: 10rpx;
		}
		.tab_default{
			width: 14px;
			height: 2px;
			background-color: white;
			border-radius: 2px;
			margin-top: 10rpx;
		}
	}
	
</style>
